<template>
	<div>
		<h3 class="header">jq实现简单的todolist、TODOLIST,关闭网页数据仍然保存</h3>
		<!-- todolist -->
		<div class="todolist">
			<!-- top -->
			<div class="top">
				<!-- title -->
				<div class="title">
					<h2>TODOLIST</h2>
				</div>
				<!-- search -->
				<div class="search">
					<input type="text" v-model="add" @keyup.13="pushList" />
					<button @click="pushList" type="button">add</button>
				</div>
			</div>
			<!-- head -->
			<div class="head">
				<!-- list -->
				<div class="list">
					<!-- centent -->
					<div class="centent">
						<h3>need to be dealt with</h3>
					</div>
					<!-- time -->
					<div class="time">
						<h3>time</h3>
					</div>
					<!-- operation -->
					<div class="operation">
						<h3>operation</h3>
					</div>
				</div>
			</div>
			<div class="cx_content">
				<div
					class="listtodo"
					v-for="(item, index) in list"
					:key="item.add"
					:class="{ done: item.active }"
				>
					<div class="centent">{{ item.add }}</div>
					<div class="time">{{ item.time }}</div>
					<div class="operation">
						<button class="done" @click="toggle(index)">done</button>
						<button @click="del(index)">delete</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	methods: {
		pushList() {
			if (this.add != '') {
				// 添加日期效果
				let date = new Date()
				let week = [
					'星期日',
					'星期一',
					'星期二',
					'星期三',
					'星期四',
					'星期五',
					'星期六',
				]
				this.list.push({
					// 文本内容
					add: this.add,
					// 内容时间
					time: `${date.getFullYear()}年${
						date.getMonth() + 1
					}月${date.getDate()}日${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}${
						week[date.getDay()]
					}`,
					// 内容样式默认无
					active: false,
				})
				// 添加后的input空
				this.add = ''
				localStorage.setItem('arr', JSON.stringify(this.list))
			}
		},
		// 样式变化一次
		toggle(ind) {
			this.list[ind].active = true
		},
		// 删除所选
		del(index) {
			this.list.splice(index, 1)
			// 添加删除线效果
			localStorage.setItem('arr', JSON.stringify(this.list))
		},
	},
	data() {
		return {
			// 创建空字符串
			add: '',
			// 创建空数组
			list: [],
		}
	},
}
</script>

<style lang="scss">
.header {
	text-align: center;
	line-height: 50px;
}
.todolist {
	width: 800px;
	height: 800px;
	margin: 20px auto;
	border-style: dotted solid double dashed;
}
.top {
	height: 100px;
}
.title {
	text-align: center;
}
.search {
	text-align: center;
	input {
		margin: 10px;
		width: 650px;
		height: 30px;
		padding-left: 5px;
	}
	button {
		width: 60px;
		height: 30px;
		background-color: #428bca;
		border-color: #357ebd;
		color: #fff;
		border-radius: 5px;
		border: none;
	}
}
.head {
	height: 50px;
}
.list {
	margin-top: 10px;
	height: 30px;
	display: flex;
	text-align: center;
}
.centent {
	width: 50%;
	text-indent: 40px;
}
.time {
	width: 30%;
}
.operation {
	width: 20%;
	text-align: center;
}
.operation button {
	padding: 5px;
	margin-left: 5px;
	background-color: #428bca;
	border-color: #357ebd;
	color: #fff;
	border-radius: 5px;
	border: none;
}
.cx_centont {
	height: 600px;
}
.listtodo {
	display: flex;
}
.done {
	text-decoration: line-through;
	color: red;
}
</style>
